<template>
  <main>
    <a-button style="margin-left: 5px" @click="onLogin"> Login </a-button>
    <div style="margin-left: 80px">
      <textarea style="width: 100%; color: black" rows="10" :value="loginResponse"> </textarea>
    </div>

    <a-button style="margin-left: 5px" @click="onHome"> Home </a-button>
  </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import io from 'socket.io-client'
import { home } from '../api/UserAPI' //引入api
const loginResponse = ref<string>('')

async function onHome() {
  await home()
}

async function onLogin() {
  const token = window.localStorage.getItem('token')
  const socket = io('http://localhost:3003', {
    reconnection: false,
    timeout: 4000,
    extraHeaders: { token: token || '' },
    protocols: [token || '']
  })
  socket.on('connect', function () {
    console.log('Connected')
    loginResponse.value = 'Connected:'

    // socket.emit('events', { test: 'test111' })
    // socket.emit('events', { test: 'test222' })
    // socket.emit('identity', 'test identity', (response: any) => {
    //   loginResponse.value = loginResponse.value + '\nidentity:' + response
    // })
  })
  socket.on('events', function (data) {
    loginResponse.value = loginResponse.value + '\nevents:' + JSON.stringify(data)
  })
  socket.on('exception', function (data) {
    loginResponse.value = loginResponse.value + '\nexception:' + data
  })
  socket.on('disconnect', function () {
    loginResponse.value = loginResponse.value + '\nDisconnected:'
  })
}
</script>
